<template>
  标题:<input type="title" v-model="title" /> 日期:<input
    type="date"
    v-model="date"
  />
  <br />
  <br />
  <button @click="add">提交</button>
  <br />
  <br />
  <button @click="sub">添加</button>

  <table>
    <tr>
      <th>标题</th>
      <th>日期</th>
      <th>操作</th>
    </tr>
    <div class="box" @scroll="onscroll">
      <div class="scroll" :style="{ height: list.length * 30 + 'px' }">
        <div
          class="placeholder"
          :style="{ height: currentIndex * 30 + 'px' }"
        ></div>

        <tr v-for="(item, index) in displayArr" :key="index">
          <td>{{ item.title }}</td>
          <td>{{ item.date }}</td>
          <td>
            <button @click="edit(item.id)">编辑</button>
            <button @click="del(id)">删除</button>
          </td>
        </tr>
      </div>
    </div>
  </table>
</template>

<script>
export default {
  name: "TableIndex",
  data() {
    return {
      title: "",
      date: "",
      list: localStorage.getItem("list")
        ? JSON.parse(localStorage.getItem("list"))
        : [],
      pid: "0",
      currentIndex: 0,
    };
  },
  computed: {
    displayArr() {
      return this.list.slice(this.currentIndex, this.currentIndex + 10);
    },
  },
  methods: {
    add() {
      const title = this.title;
      const date = this.date;
      console.log(title, date);
      this.list.push({
        title: title,
        date: date,
        id: +new Date(),
      });
      this.title = "";
      this.date = "";
    },
    edit(id) {
      this.pid = id;
      const res = this.list.find((el) => el.id === id);
      this.title = res.title;
      this.date = res.date;
    },
    del(id) {
      this.list.splice(id, 1);
    },
    sub() {
      const eee = this.list.find((el) => el.id === this.pid);
      eee.title = this.title;
      eee.date = this.date;
      this.title = "";
      this.date = "";
    },
    onscroll(e) {
      const scrollTop = e.target.scrollTop;
      this.currentIndex = Math.floor(scrollTop / 30);
      console.log(this.currentIndex);
    },
  },
};
</script>

<style>
.box {
  height: 300px;
  overflow-y: auto;
}
/* .scroll {
  height: 30000px;
} */
table {
  border: 1px solid #000;
  border-collapse: collapse;
}

th {
  border: 1px solid #000;
}
tr {
  border: 1px solid #000;
}
td {
  border: 1px solid #000;
}
</style>